<template>
  <el-form-item 
    :label="label" 
    :prop="prop" 
    :rules="rules"
    :class="{ 'mobile-form-item': isMobileDevice }"
  >
    <!-- 输入框 -->
    <el-input
      v-if="type === 'input'"
      v-model="inputValue"
      :placeholder="placeholder"
      :type="inputType"
      :disabled="disabled"
      :clearable="!isMobileDevice || clearable"
      :class="{ 'mobile-input': isMobileDevice }"
    />
    
    <!-- 选择器 -->
    <el-select
      v-else-if="type === 'select'"
      v-model="inputValue"
      :placeholder="placeholder"
      :disabled="disabled"
      :class="{ 'mobile-select': isMobileDevice }"
      style="width: 100%"
    >
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
    
    <!-- 开关 -->
    <el-switch
      v-else-if="type === 'switch'"
      v-model="inputValue"
      :disabled="disabled"
      :class="{ 'mobile-switch': isMobileDevice }"
    />
    
    <!-- 数值调整器 -->
    <el-input-number
      v-else-if="type === 'number'"
      v-model="inputValue"
      :min="min"
      :max="max"
      :step="step"
      :disabled="disabled"
      :class="{ 'mobile-number': isMobileDevice }"
      style="width: 100%"
    />
  </el-form-item>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'input',
    validator: (value) => ['input', 'select', 'switch', 'number'].includes(value)
  },
  label: String,
  prop: String,
  modelValue: [String, Number, Boolean],
  placeholder: String,
  inputType: {
    type: String,
    default: 'text'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  options: {
    type: Array,
    default: () => []
  },
  rules: Array,
  min: Number,
  max: Number,
  step: {
    type: Number,
    default: 1
  }
})

const emit = defineEmits(['update:modelValue'])

// 设备类型检测
const isMobileDevice = computed(() => {
  return window.innerWidth <= 768 || document.body.classList.contains('mobile-device')
})

const isDesktopDevice = computed(() => {
  return window.innerWidth > 768 || document.body.classList.contains('desktop-device', 'tablet-device')
})

const inputValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})
</script>

<style scoped>
/* 移动端表单项优化 */
.mobile-form-item {
  margin-bottom: 20px;
}

.mobile-form-item :deep(.el-form-item__label) {
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* 移动端输入框优化 */
.mobile-input :deep(.el-input__inner) {
  height: 48px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.mobile-input :deep(.el-input__inner):focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.mobile-input :deep(.el-input__prefix),
.mobile-input :deep(.el-input__suffix) {
  display: flex;
  align-items: center;
}

/* 移动端选择器优化 */
.mobile-select :deep(.el-input__inner) {
  height: 48px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  border: 1px solid #dcdfe6;
}

.mobile-select :deep(.el-input__inner):focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

/* 移动端开关优化 */
.mobile-switch {
  transform: scale(1.2);
}

/* 移动端数字输入优化 */
.mobile-number :deep(.el-input__inner) {
  height: 48px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  border: 1px solid #dcdfe6;
}

.mobile-number :deep(.el-input-number__decrease),
.mobile-number :deep(.el-input-number__increase) {
  width: 40px;
  height: 24px;
  border-radius: 4px;
}

/* 错误状态优化 */
.mobile-form-item.is-error :deep(.el-input__inner),
.mobile-form-item.is-error :deep(.el-select .el-input__inner) {
  border-color: #f56c6c;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.1);
}

.mobile-form-item :deep(.el-form-item__error) {
  font-size: 12px;
  margin-top: 4px;
  padding-left: 4px;
}

/* 禁用状态 */
.mobile-input.is-disabled :deep(.el-input__inner),
.mobile-select.is-disabled :deep(.el-input__inner) {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
}

/* 响应式优化 */
@media (max-width: 480px) {
  .mobile-form-item {
    margin-bottom: 16px;
  }
  
  .mobile-input :deep(.el-input__inner),
  .mobile-select :deep(.el-input__inner),
  .mobile-number :deep(.el-input__inner) {
    height: 44px !important;
    font-size: 15px !important;
  }
}

/* 防止iOS自动缩放 */
@supports (-webkit-touch-callout: none) {
  .mobile-input :deep(.el-input__inner),
  .mobile-select :deep(.el-input__inner),
  .mobile-number :deep(.el-input__inner) {
    font-size: 16px !important;
  }
}
</style>
